<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 700px;
				/* height: 300px; */
				border: 1px solid black;
				margin: 0 auto;
			}

			textarea {
				resize: none;
				width: 450px;
				height: 260px;
				font-size: 30px;
			}

			li {
				list-style: none;
				border-bottom: 2px dashed;
				line-height: 50px;
				/* 居中显示 */
				width: 450px;
				margin: 0px auto;

			}

			a {
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<label>请发布您的留言</label>
			<textarea id="txt"></textarea>
			<button onclick="sendMessage()">发布</button>
			<ul id="father">
			</ul>
		</div>
		<script type="text/javascript">
			function sendMessage() {
				var txt = document.getElementById("txt");
				if (txt.value.length === 0) {
					alert("留言不能为空");
					return;
				}
				//创建一个新的li元素
				var newLi = document.createElement("li");
				//内容等于用户创建的内容
				newLi.innerHTML = txt.value + "<a href='#'>删除</a>";
				var father = document.getElementById("father");
				//在指定位置查插入新元素
				father.insertBefore(newLi, father.childNodes[0]);
				//清空文本
				txt.value = "";

				//获取a元素
				//获取用户创建第一个子元素
				var a = newLi.firstElementChild;
				//动态绑定click事件 匿名函数
				a.onclick = function() {
					// alert()
					if (confirm("确定删除该条评论吗？"))
						father.removeChild(newLi);
				}
			}
		</script>
	</body>
</html>
